header {
  width: 100%;
  height: 55px;
  background-color: rgb(0, 108, 145);
  /* position: fixed; */
  position: relative;  
}
/* HeadMain Set */
header #Logo {  
  float: left;

  width: 30%;
  height: 100%;
  /* background-color: brown; */

  position: relative;  
}
header #Logo .Logos {
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%) scale(0.32);

  cursor:pointer;
}


/* -------------------------------------------------------------------- */
header #HeadMain {   
  float: left;

  width: 70%;
  height: 100%;  
  /* background-color: burlywood;   */

  position: relative;  
}
header #HeadMain ul {    
  width: 60%;
  height: 40px;
  /* background-color: blueviolet; */

  margin-top: 8px;
}
/* 首页 */
header #HeadMain ul li a {
  color: rgb(201, 201, 201);

  text-decoration: none;
}
header #HeadMain ul li a:hover {
  color: #fff;
}
/* 选项 */
header #HeadMain ul li {    
  float: left;

  font-size: 30px;
  font-weight: 500;
  color:rgb(199, 131, 42);
  text-align: center;
}
header #HeadMain ul li:nth-child(1) {
  width: 30%;
  height: 100%;
}
header #HeadMain ul li:nth-child(2) {
  width: 35%;
  height: 100%;
}
header #HeadMain ul li:nth-child(3) {
  width: 35%;
  height: 100%;
}
header #HeadMain ul li a {    
  color:rgb(199, 131, 42);
}
header #HeadMain ul li:hover {  
  color:rgb(255, 145, 0);

  cursor:pointer;
}
header #HeadMain ul li a:hover {  
  color:rgb(255, 145, 0);

  cursor:pointer;
}

/* 类别选项 */
header #HeadMain .HeadMainBox {
  position: absolute;
  left: -100px;
  top: 55px;
  z-index: -1;

  width: 1000px;
  height: 100px;
  padding-top: 5px;
  background-color: rgba(68, 68, 68, 0.3);
  border-radius: 0 0 10px 10px;
}
.HeadMainBoxHidden {
  display: none;
}
.HeadMainBoxAccording {
  display: block;

  animation-name: jjj;
  animation-duration: 1.2s;
}
@keyframes jjj {
  0% {
    opacity: 0;    
  }
  100% {
    opacity: 1;
  }
}

/* 类别选项 标签 */
header #HeadMain .HeadMainBox span {
  display: inline;
  font-size: 15px;
  color: rgb(80, 80, 80);

  margin: 0px 15px;
  padding: 5px 10px;
    
  border-radius: 6px;
  line-height: 40px;
  
  background-color: rgba(255, 255, 255, 0.7);

  cursor:pointer;
}
header #HeadMain .HeadMainBox span:hover {
  color:black;
  background-color: rgba(255, 235, 219, 0.7);
}
/* 类别盒子关闭 */
header #HeadMain .HeadMainBox .HeadMainBoxShutDown {  
  position: absolute;
  right: 10px;
  bottom: 10px;

  width: 23px;
  height: 23px;
  background-color:rgba(255, 166, 0, 0.7);  

  border-radius: 7px;
}
header #HeadMain .HeadMainBox .HeadMainBoxShutDown span {
  padding: 0px;
  padding-left: 3.5px;
  margin: 0px;

  background-color: transparent;
  
  border-radius: 0px;
  line-height: 0px;
}
/* -------------------------------------------------------------------- */



/* ------------------------------------------------------ */
/* 设置 */
header #Set {
  position: absolute;
  top: 0px;
  right: 40px;

  width: 55px;
  height: 100%;
  /* background-color: red; */

  box-sizing: border-box;
  border: 10px solid transparent;
  
}
/* 齿轮图标字体 */
header span:first-of-type {
  display: block;
  
  font-size: 35px;
  color:rgb(255, 241, 204);
  
  cursor:pointer;
    
  transition: transform 1.2s;
}
body header .gearForward {
  transform: rotate(180deg); 

  animation-name: aaa;
  animation-duration: 1.2s;
  animation-direction: alternate;

  color:rgb(255, 209, 82); 
}
body header .gearReverse {
  transform: rotate(-180deg);  

  animation-name: bbb;
  animation-duration: 1.2s;
  animation-direction: alternate;

  color:rgb(255, 241, 204);
}
@keyframes aaa {
  0% {
    color:rgb(255, 241, 204);
  }
  100% {
    color:rgb(255, 209, 82);
  }
}
@keyframes bbb {
  0% {
    color:rgb(255, 209, 82);    
  }
  100% {
    color:rgb(255, 241, 204);
  }
}
/* 设置框 */
header #Set .SetAttribute {  
  position: absolute;
  z-index: -1;
  top: -150%;
  right: -40px;

  width: 200px;
  height: 250px;
  background-color: rgba(58, 58, 58);

  display: none;
}
header #Set .SetAttributeShow {
  animation-name: ccc;
  animation-duration: 1.2s;
  animation-fill-mode: forwards; 
  
  
  display: block;
}
header #Set .SetAttributeHidden {
  animation-name: ddd;
  animation-duration: 1.2s;
  animation-fill-mode: forwards; 
  
  
  display: block;
}
@keyframes ccc {
  from { 
    top: -250px;
  }
  to {    
    top: 45px;
  }
}
@keyframes ddd {
  from { 
    top: 45px;
  }
  to {    
    top: -250px;
  }
}
/* 关闭设置框 */
header #Set .SetAttribute .SetShutDown {  
  position: absolute;
  bottom: 10px;
  margin-left: 10px;

  width: 180px;
  height: 20px;
  background-color: rgb(255, 145, 0);
  
  border-radius: 10px;
}
header #Set .SetAttribute .SetShutDown span:first-of-type {
  float: left;
  font-size: 20px;
  color:rgb(238, 238, 238);
  cursor:pointer;
}
header #Set .SetAttribute .SetShutDown .closeRight {  
  animation-name: eee;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}
header #Set .SetAttribute .SetShutDown .closeLeft {
  animation-name: fff;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
header #Set .SetAttribute .SetShutDown span:first-of-type:hover {
  color: #fff;
}
@keyframes eee {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(160px);
  }
}
@keyframes fff {
  from {
    transform: translateX(160px);
  }
  to {
    transform: translateX(0px);
  }
}
/* 水波纹效果 */
header #Set .SetChoose {
  width: 180px;
  height: 80px;
  background-color: rgb(61, 90, 143);

  padding: 5px 0px;
  margin: 0px 10px;
  margin-top: 15px;  

  font-size: 13.5px;
  color: #fff;
  font-weight: 550;
  text-indent: 1em; 
  line-height: 20px;
  
  border-radius: 5px;
}
header #Set .SetChoose input[type="checkbox"] {
  width: 16px;
	height: 16px;  
  vertical-align:middle;  
  margin-left: 0px;
}
/* 透明度条 */
header #Set .SetChoose .slippingVisibility {
  width: 160px;
  height: 20px;
  background: rgb(56, 112, 0);
  margin-top: 5px;
  text-indent: 5px;
  margin:5px 10px;
  

  position: relative;
}
header #Set .SetChoose .slippingVisibility .slippingButton {
  width: 12px;
  height: 12px;
  background: rgb(0, 255, 98);
  border-radius: 6px;

  position: absolute;
  top: 50%;
  left: 53px;
  transform: translateY(-50%);
  z-index: 10;
}
header #Set .SetChoose .slippingVisibility .slippingArticle {
  width: 100px;
  height: 2px;
  background-color:#fff;
  
  position: absolute;
  top: 50%;
  left: 53px;
  transform: translateY(-50%);  
}
/* 波纹颜色 */
header #Set .SetChoose .slippingColor {
  width: 160px;
  height: 25px;
  background-color:rgb(88, 63, 63);
  margin: 0px auto;
}
header #Set .SetChoose .slippingColor li {
  float: left;
  transform: translateY(12%);

  width: 20px;
  height: 20px;
  background-color: forestgreen;
  margin: 0px 10px;
  border-radius: 5px;
}
header #Set .SetChoose .slippingColor li:nth-of-type(1) {
  background-color:rgb(0, 255, 98);
}
header #Set .SetChoose .slippingColor li:nth-of-type(2) {
  background-color:red;
}
header #Set .SetChoose .slippingColor li:nth-of-type(3) {
  background-color:orange;
}
header #Set .SetChoose .slippingColor li:nth-of-type(4) {
  background-color:deepskyblue;
}

/* 设置背景颜色 */
header #Set .SetAttribute .backgroundColor {
  width: 100%;
  height: 60px;
  margin-top: 10px;
}
header #Set .SetAttribute .backgroundColor ul{
  width: 100%;
  height: 50%;
  background-color: rgb(58, 58, 58);
}
header #Set .SetAttribute .backgroundColor ul li {
  float: left;
  width: 25px;
  height: 25px;
  /* background-color: red; */


  border-radius: 5px;
  margin-top: 2.5px;
  margin-left: 20px;


  box-sizing: border-box;
  border: 3px solid rgba(255, 189, 189, 0.5);
}
header #Set .SetAttribute .backgroundColor ul:first-of-type li:nth-of-type(1) {
  background-color: red;
}
header #Set .SetAttribute .backgroundColor ul:first-of-type li:nth-of-type(2) {
  background-color: green;
}
header #Set .SetAttribute .backgroundColor ul:first-of-type li:nth-of-type(3) {
  background-color: blue;
}
header #Set .SetAttribute .backgroundColor ul:first-of-type li:nth-of-type(4) {
  background-color: black;
}
header #Set .SetAttribute .backgroundColor ul:last-of-type li:nth-of-type(1) {
  background-color: white;
}
header #Set .SetAttribute .backgroundColor ul:last-of-type li:nth-of-type(2) {
  background-color: rgb(138, 172, 131);
}
header #Set .SetAttribute .backgroundColor ul:last-of-type li:nth-of-type(3) {
  background-color:rgb(131, 134, 172);
}
header #Set .SetAttribute .backgroundColor ul:last-of-type li:nth-of-type(4) {
  background-color: rgb(146, 128, 46);
}
/* ------------------------------------------------------ */